<template>
  <div class="container">
    
  <div class="collage_search">
			<div class="search">
				<i-icon type="search" size="18" color="rgb(133,133,133)" style="margin-top: -4px;" />
				<div  type="text"  @click="jump" style="font-size:11px;text-indent:1em;" >搜索附近的运动场馆</div>
			</div>
		</div>
		<div class="swiper-box">
				<swiper class="banner" indicator-dots='true' autoplay='true' interval='3000' indicator-active-color="#fff" >
			<swiper-item v-for='(items,i) in img' :key="i"><img :src="items"/></swiper-item>
		</swiper>
		</div>	
		<div class="collage_make">
			<div class="collage_type">
				<span>
					场馆类型
					<div class="collage_img">
						<i-icon type="unfold" size="14" color="#606060" v-if="typeActive==false"  @click.stop="ownerList"></i-icon>
						<i-icon type="packup" size="14" color="#606060" v-if="typeActive==true" @click.stop="backList"></i-icon>
					</div>
				</span>
				<span>
				地区
				<div class="collage_img" @click.stop="ownerArea">
						<i-icon type="unfold" size="14" color="#606060" v-if="areaActive==false"  @click.stop="areaMost"></i-icon>
						<i-icon type="packup" size="14" color="#606060" v-if="areaActive==true" @click.stop="areaMost"></i-icon>
				</div>
			</span>
			</div>
			<div class="venue_type" v-show="typeActive">
				<ul>
					<li v-for="(items,idx) in type" :key="idx" :class="{active:idx==isActive}" @click="changeClass(items)">{{items.content}}</li>
				</ul>
			</div>
			<div class="venue_type" v-show="areaActive" >
				<ul>
					<li v-for="(items,idx) in area" :key="idx" :class="{active:idx==isActive}" @click="areass(items)">{{items.area}}</li>
				</ul>
			</div>
				<ul>
					<li v-for="(item,index) in areas" :index="index" >
						<div class="collage_li">
							<dl>
								<dt><img :src="item.photo"></dt>
								<dd>
									<p>{{item.gym_name}}</p>
									<div class="xing">
										<div class="collage_xing">
											<div v-if="item.start == 0">
												<span v-for="(xs,idxs) in  starIcon" :key="idxs"><img :src="item.hs" alt></span>
											</div>
											<div v-else>
												<span v-for="(xsl,idxsl) in item.start" :key="idxsl"><img :src="hs" alt></span>
												<span v-for="(xsls,idxsls) in 5-Number(item.start)" :key="idxsls"><img :src="h" alt></span>
											</div>
										</div>
									</div>
									
									<div class="collage_run">{{item.distance}}km</div>
									<div class="collage_price">
									<img src="../../../../static/images/venue_index/price_03.png" alt>
									<span>￥49</span>
								</div>
								<div class="collage_scroll">
									<div class="dd_left">
										<span  v-if="seen2" style="margin-right:5px;"  v-for="(its,ins) in item.tagThree" :key="ins">{{its}}</span>	
										<span  v-if="seen3" style="margin-right:5px;" v-for="(its,ins) in item.tags" :key="ins">{{its}}</span>				
									</div>
									<div class="dd_right">
										<i-icon type="unfold" v-if="seen2" @click="tagThree" size="14" color="#606060" ></i-icon>
										<i-icon type="packup" v-if="seen3" @click="tagThrees" size="14" color="#606060" ></i-icon>
									</div>
								</div>
								</dd>
							</dl>
						</div>
					</li>
			</ul>
		</div>		
		<div class="collage_doc">百余家场馆 即将震撼开启...</div>
  </div>
</template>
<script>
var network = require("../../../utils/commonality.js")
var app=getApp()
export default {
  data () {
    return {
    	img:'',
    	seen9: true,
		seen: true,
		seen2:true,
		seen3:false,
		state: 0,
    	most: [],
    	isActive: 0,
		YesActive: 0,
		content:'',
    	typeActive: false,
		areaActive: false,
		type: [{
			idx: 0,
			content: '全部场馆'
			}, {
			idx: 1,
			content: '瑜伽馆'
			}, {
			idx: 2,
			content: '健身房'
			  }, {
			idx: 3,
			content: '游泳健身'
		}],
		starIcon: [{
						hs: require("../../../../static/images/venue_index/changguan_13.jpg")
					},
					{
						hs: require("../../../../static/images/venue_index/changguan_13.jpg")
					},
					{
						hs: require("../../../../static/images/venue_index/changguan_13.jpg")
					},
					{
						hs: require("../../../../static/images/venue_index/changguan_13.jpg")
					},
					{
						hs: require("../../../../static/images/venue_index/changguan_13.jpg")
					}
				],
		hs:require("../../../../static/images/venue_index/changguan_11.jpg"),
		h: require("../../../../static/images/venue_index/changguan_13.jpg"),
		area:'',
		areas:'',
		lat:'',
		lng:''
    }
  },
  created(options){
      var url='yujiaextend/user/findHomePageImages'
      var methods='POST'
      var date={
      }
	  let _this = this;
      network.requestLoading(url ,date, methods, '正在加载数据', function (res) {
		_this.img=res.data
	  })
	  wx.getLocation({
		type: 'wgs84',
		success(res) {
			_this.lat = res.latitude
			_this.lng = res.longitude
			const speed = res.speed
			const accuracy = res.accuracy
			_this.ajax(_this.lng,_this.lat)
		}
		})
  },
  onLoad(){
		console.log(app)
  },
  methods: {
	ajax(lng,lat,type,area){
	  var url='yujiaextend/user/findGymByGpsWX'
      var methods='POST'
      var date={
		  lng:lng,
		  lat:lat,
		  type:type,
		  area:area
      }
	  let _this = this;
      network.requestLoading(url ,date, methods, '正在加载数据', function (res) {
		_this.areas=res.data
	  })
	},
    jump(){
      wx.navigateTo({
        url: '../search/main'
      })
    },
    bindViewTap () {
      wx.navigateTo({ url })
    },
    getUserInfo () {
      wx.login({
        success: () => {
          wx.getUserInfo({
            success: (res) => {
              this.userInfo = res.userInfo
            }
          })
        }
      })
	},
	tagThree(){
		this.seen2=false
		this.seen3=true
	},
	tagThrees(){
		this.seen3=false
		this.seen2=true
	},
	backList() {
		this.typeActive = false
	},
    ownerList() {
		if(this.areaActive==true){
			this.areaActive =false
			this.typeActive=true
		}else{
			this.typeActive = true
			}
		},
	areaMost() {
		if(this.typeActive==true){
			this.typeActive =false
			this.areaActive=true
		}else{
		   this.areaActive = true
		}
		var url='yujiaextend/yogagym/findAllYogaGymTitleCount'
		var methods='POST'
		var date={
		}
		let _this = this;
		network.requestLoading(url ,date, methods, '正在加载数据', function (res) {
			_this.area=res.data
		})
	},
	areass(item){
		this.ajax(this.lng,this.lat,this.content,item.area)
		this.areaActive=false
	},
	changeClass(items){
		this.content=items.content
		this.ajax(this.lng,this.lat,items.content)
		this.typeActive = false;
	}
  },
  
}
</script>

<style scoped>
.collage_search{
    width: 90%;
    margin: 0 auto;
    margin-top:5px;
}
.collage_search .search{
    width: 100%;
    height: 30px;
    border-radius: 1.5625rem /* 25/16 */;
    box-shadow: 3px 2px 10px 3px rgba(41, 47, 61, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.collage_search .search .i-icon-search{
    display: block;
   
}
.collage_search .search input{
    /*width: 100%;*/
   height: 30px;
   line-height:30px;
    border: none;
    outline: none;
    padding: 0;
    text-align: left;
    padding-left: 5px;
    font-size:13px;
    color:rgb(170,170,170);
    font-family: '微软雅黑';
    letter-spacing: 1px;
}
.collage_search .search input::placeholder{
    font-size: 13px;
    color: #aaaaaa;
    font-family: '微软雅黑'; 
}

/*轮播图*/
.banner{
	width: 100%;
	height: 130px;
	margin-top: 17px;
}
.banner img{
	width: 100%;
	height: 130px;
}
.banner .wx-swiper-dot-active{
	    width: 15px!important;
    height: 6px!important;
    border-radius: 15px;
}

.collage_make{
    width: 100%;
    float: left;
    position: relative;

}
 .collage_make .collage_type{
 	width: 100%;
 	height: 40px;
 	display: flex;
 	align-items: center;
 	justify-content: space-around;
 	background: #f8f8f8;
 
}
 .collage_make .collage_type span{
 	font-size: 14px;
 	color: #606060;
 	/*font-weight: bold;*/
 	display: flex;
 	align-items: center;
 	
 }
 .collage_make .collage_type span .collage_img{
 	display: flex;
 	align-content: center;
 	margin-left: 5px;
 	margin-top: -1px;
 }
 
 
 /*场馆类型*/
 .collage_make .venue_type{
 	width: 100%;	
 	height: 100%;
 	background: rgba(0,0,0,0.6);
 	position: absolute;
 	left: 0;
 	top: 40px;
 	z-index: 6;
 }
 .collage_make .venue_type ul{
 	width: 100%;
 	/*padding: 0 15px;*/
 	padding-top: 14px;
 	background: #f8f8f8;
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 }
 .collage_make .venue_type ul li{
 	border-bottom: none;
 	margin-left:12px;
 	width: 75px;
 	height: 24px;
 	text-align: center;
 	border-radius: 15px;
 	font-size: 12px;
 	color: #606060;
 	border: 1px solid #606060;
 	margin-bottom: 12px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
 .collage_make .venue_type ul li span{
 	font-size: 12px;
 }
 .collage_make .venue_type ul li font{
 	font-size: 12px;
 }
 /*场馆类型结束*/
 .collage_make ul{
    width: 100%;
    float: left;
}
 .collage_make ul li{
    width: 100%;
    border-bottom:3px solid #eeeeee;
    float: left;
}
 .collage_make ul li .collage_li{
    width:92%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom:9px;
    padding-top: 12px;

}

 .collage_make ul li .collage_li dl{
 	width: 100%;
    display:flex;
    align-items: flex-start;
    text-align: left;
}
.collage_make ul li .collage_li dl dt{
	width: 100px;
    height: 100px;
}
 .collage_make ul li .collage_li dl dt img{
   width: 100px;
	height: 100px;
}
 .collage_make ul li .collage_li dl dd p{
     width: 100%;
    color: #000000;
    text-align: left;
    font-size:15px;
    font-weight: bold;
    overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
 .collage_make ul li .collage_li dl dd {
 	width: 70%;
    text-align: left;
    padding-left: 12px;
    position: relative;
}


 .collage_make ul li .collage_li dl dd .xing{
     margin-top: 5px;
    /*line-height: 1.375rem;*/
    text-align: left;
   
}
.collage_make ul li .collage_li dl dd .xing .collage_xing{
    width: 100%;
    display: flex;
align-items: center;
}

.collage_make ul li .collage_li dl dd .xing .collage_xing div{
    width: 100%;
    height:16px;
    text-align: left;
    float: left;
}
.collage_make ul li .collage_li dl dd .xing .collage_xing div span{
    width: 14px;
    height: 15px;
    display: inline-block;
    margin-right:2px;
    float: left;
    display: flex;
    align-items: center;
    
}
.collage_make ul li .collage_li dl dd .xing .collage_xing div span img{
    width: 14px;
    height: 15px;
    
}
 .collage_make ul li .collage_li dl dd .collage_run{
     width: 100%;
     line-height: 18px;
 	text-align: right;
 	color: #606060;
 	font-size: 12px;
 	position: absolute;
 	right: 0;
 	top:50px;
 }
 .collage_make ul li .collage_li dl dd .collage_price{
     width: 100%;
     line-height:18px;
 	text-align: left;
    display: flex;
    align-items: center;
    margin-top: 8px;

 }
 
 .collage_make ul li .collage_li dl dd .collage_price img{
     display: block;
     width:28px;
     height: 14px;
 }
 .collage_make ul li .collage_li dl dd .collage_price span{
    font-size: 16px;
    color: #444444;
    font-weight: bold;
    margin-left: 5px;
}
.collage_make ul li .collage_li dl dd .collage_scroll{
    width: 100%;
    display: flex;
    align-items: center; 
    justify-content: space-between;
    margin-top: 12px;
    
}
.collage_make ul li .collage_li dl dd .collage_scroll .dd_left{
width: 94%;
text-align: left;
}
.collage_make ul li .collage_li dl dd .collage_scroll .dd_left span{
	/*width: 60px;*/
    display: inline-block;
    height: 20px;
    line-height: 20px;
    font-size: 11px;
    color: #febb06;
    padding: 0 6px;
   background: #fff7d9;
    margin-bottom: 3px;
    overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
    }
     .collage_make ul li .collage_li dl dd .collage_scroll .dd_right{
     	width: 6%;
        margin-top: -12px;
    }
 
.active {
		background: #888888;
		border: none!important;
		color: #fff !important;
	}
	
	.Listactive {
		background: #888888;
		border: none!important;
		color: #fff !important;
	}
	 .collage_doc{
        width: 100%;
        float: left;
        text-align: center;
        margin:15px 0;
        font-size: 12px;
        color:rgb(170,170,170);

    }
    
</style>
